<template>
	<view class="container" v-if="list.length">
		<view class="topTit flex">
			<view class="tit">{{curItem.name}}</view>
			<view class="btn" @click="openPopup">切换</view>
		</view>
		<view class="mainBox">
			<view class="bg">
				<view class="mainTop flex">
					<view class="tit flex-1">房屋账户余额</view>
					<view class="txt" @click="$Foundation.goTo(`/pages/personal/cardbag/balanceDetail?custId=${curItem.custId}&custType=${curItem.custType}`)">金额明细</view>
				</view>
				<view class="balance">￥<text class="num">{{$filters.formatPrice(curItem.balance)}}</text></view>
				<view class="btnBox flex">
					<view class="btn flex-1" @click="$Foundation.goTo(`/pages/personal/recharge/recharge?custId=${curItem.custId}&custType=${curItem.custType}`)"><image class="img" :src="$imgUrl + '/icon/recharge.png'" mode=""></image>充值</view>
					<view class="btn flex-1" @click="$Foundation.goTo(`/pages/personal/houseWallet/withdraw?custId=${curItem.custId}&balance=${curItem.balance}`)"><image class="img" :src="$imgUrl + '/icon/withdraw.png'" mode=""></image>提现</view>
				</view>
			</view>
		</view>
	</view>
	<view style="padding-top: 40rpx;" v-if="!list.length&&!showLoading">
		<empty></empty>
	</view>
	<uni-popup ref="checkpopup" type="bottom" background-color="rgba(0,0,0,0)">
		<view class="check-popup">
			<view class="cancel" @click="cancel">取消</view>
			<view>
				<picker-view indicator-style="50px" :value="value" @change="bindChange" class="picker-view">
				    <picker-view-column>
				        <view class="item" v-for="(item,index) in list" :key="index">{{item.name}}</view>
				    </picker-view-column>
				</picker-view>
			</view>
			<view class="btn" @click="confirm">确定</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app"
import { financeAll } from '@/common/API/finance'
const checkpopup = ref(false)
const showLoading = ref(true)
const list = ref([])
const curIndex = ref([0])
const curItem = ref()

onShow(()=>{
	getInfo()
})

const getInfo = async ()=>{
	uni.showLoading({
		title:'加载中...'
	})
	showLoading.value = true
	let res = await financeAll()
	uni.hideLoading()
	showLoading.value = false
	list.value = res
	if(list.value.length){
		curItem.value = list.value[0]
		console.log(curItem.value)
	}
}

const openPopup = (item) => {
	checkpopup.value.open()
}
const cancel = () => {
	checkpopup.value.close()
}

// 切换
const bindChange = (e) =>{
	curIndex.value = e.detail.value
}

//确认
const confirm = () => {
	curItem.value = list.value[curIndex.value]
	checkpopup.value.close()
}
</script>

<style lang="scss" scoped>
.container{
	background: #fff;
	height: 100vh;
	padding: 0 32rpx;
	.topTit{
		font-weight: bold;
		padding: 42rpx 0;
		margin: 0 0 16rpx;
		.tit{
			font-size: 32rpx;
		}
		.btn{
			font-size: 32rpx;
			margin-left: 32rpx;
			color: $uni-color-primary;
		}
	}
	.mainBox{
		background: linear-gradient(134deg, #FCD266 0%, #FF536B 100%);
		border-radius: 30rpx;
		.bg{
			background: url('#{$imgUrl}/icon/houseWallet_bg.png') no-repeat 344rpx 4rpx;
			background-size: 295rpx 303rpx;
		}
		.mainTop{
			padding: 56rpx 32rpx 0 48rpx;
			.tit{
				color: #fff;
			}
			.txt{
				color: #fff;
			}
		}
		.balance{
			color: #fff;
			padding: 0 32rpx 50rpx 48rpx;
			.num{
				font-size: 56rpx;
				font-weight: bold;
				margin-left: 4rpx;
			}
		}
		.btnBox{
			border-top: 2rpx solid #E9E9E9;
			padding: 28rpx 0;
			.btn{
				text-align: center;
				color: #fff;
				line-height: 56rpx;
				border-right: 2rpx solid #E9E9E9;
				&:last-child{
					border: none;
				}
				.img{
					width: 36rpx;
					height: 36rpx;
					display: inline-block;
					vertical-align: text-top;
					margin-right: 16rpx;
				}
			}
		}
	}
}
.check-popup{
	height: 530rpx;
	border-radius: 28rpx 28rpx 0 0;
	background: rgba(255, 255, 255, 1);
	text-align: center;
	.picker-view{
		height: 200rpx;
	}
	.cancel{
		color: rgba(153, 153, 153, 1);
		font-size: 26rpx;
		text-align: right;
		padding: 32rpx;
	}
	.btn{
		margin: 94rpx 32rpx 40rpx 32rpx;
		border-radius: 200rpx;
		background: rgba(253, 150, 24, 1);
		color: #fff;
		border-radius: 200rpx;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 32rpx;
	}
}
</style>
